<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in listData" :key="item.bannerId">
      <van-image :radius="10" :src='item.pic'></van-image>
      <span class="swipeTitle" :style="{backgroundColor:item.titleColor}">{{item.typeTitle}}</span>
    </van-swipe-item>
    
  </van-swipe>
</template>

<script setup>
const props = defineProps({
  listData:Array
})

</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  
}
.swipeTitle{
  padding: 1px 10px;
  font-size: 10px;
  border-radius: 8px;
  position: absolute;
  bottom: 5px;
  right: 10px;
}
:deep(.van-image){
  margin: 0 10px;
}
:deep(.van-swipe__indicators){
  bottom: 10px;
}
:deep(.van-swipe__indicator){
  width: 10px;
  border-radius: 0;
  height: 3px;
}
</style>